<div>

    <div @field="master" class="master">
        <button @field="id" @click="get">ClickMeToGetMyData</button>
        <label for="" @field="id"></label>
        <label for="" @field="name"></label>
        <br /> gender:
        <div @field="gender">
            male:<input type="radio" name="gender" @field="male" /> female:
            <input type="radio" name="gender" @field="female" />
        </div>
        11
        <div @field="info">
            <div @field="email">
                <label for="" @field="id"></label>
            </div>
        </div>
        <select @field="selected">
            <option @field="province|"></option>
        </select>
        <select @field="selected">
            <option @field="province|"></option>
        </select>
    </div>
    <div class="details">
        <button @click="add">add</button>
        <button @click="clear">clear</button>

        <ul>
            <li @field="details|d">
                <input type="checkbox" @field="d.checked" />
                <input type="text" @field="d.id" /> | <input @field="d.name" type="text" />
                <button @field="d.id">edit</button>
            </li>
        </ul>

    </div>
</div>

<script>
    makeCalo({
        model: {
            master: {
                id: 0,
                name: "mster",
                gender: {
                    male: true,
                    female: false
                },
                info: {
                    email: {
                        id: 888
                    }
                },
                province: ['Henan', 'Shanghai', 'Jiangsu'],
                selected: 'Shanghai'
            },
            details: [{
                checked: false,
                id: 1,
                name: 'def'
            }, {
                checked: false,
                id: 2,
                name: 'bb'
            }]
        },
        add() {
            var counter = this.model.details.length
            this.model.details.push({
                checked: false,
                id: counter + 1,
                name: ""
            })
        },
        clear() {
            this.model.details = []
            this.model.master.info.email.id = 1000
        },
        get(el) {
            this.model.selected = this.model.master.province[2]
            console.log(el);
        }

    })
</script>